<template>
	<view class="container">
		<view class="shop-list">
			<view class="empty" v-if="list.length === 0 && loadingType === 2">
				<text class="tip">暂无门店</text>
			</view>
			<view class="shop-item" v-for="(item, index) in list" :key="index" @click="editShop(item.id)">
				<view class="shop-info">
					<image class="cover" :src="item.cover_url || '/static/imgs/default-shop.png'" mode="aspectFill"></image>
					<view class="content">
						<text class="name">{{item.name}}</text>
						<text class="address">{{item.address}}</text>
						<text class="time">营业时间: {{item.is_24h ? '24小时' : item.start_time + '-' + item.end_time}}</text>
					</view>
				</view>
				<view class="shop-status" :class="{'active': item.state === 1}">
					<text>{{item.state === 1 ? '营业中' : '已休息'}}</text>
				</view>
			</view>
		</view>
		
		<!-- 加载更多 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
		
		<view class="add-btn" @click="addShop">
			<text class="iconfont icon-add"></text>
			<text class="text">新增门店</text>
		</view>
	</view>
</template>

<script>
import { getShopList } from '@/service/api/shop.js'
import mixinsAuth from '@/mixins/auth.js'
import mixinsCommon from '@/mixins/common.js'

export default {
	mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			page: 1,
			list: [],
			loadingType: 1,
			loadingText: ''
		}
	},
	onShow() {
		this.loadData(true)
	},
	onReachBottom() {
		if (this.loadingType !== 1 && this.loadingType !== 2) {
			this.loadData()
		}
	},
	methods: {
		loadData(refresh) {
			if (refresh) {
				this.page = 1
				this.list = []
			} else {
				this.page++
			}
			
			this.loadingType = 1
			this.loadingText = ''
			
			getShopList('all', this.page, 10,true).then(([err, res]) => {
				this.loadingType = -1
				if (!err) {
					if (res.items.length > 0) {
						this.list = [...this.list, ...res.items]
					} else {
						this.loadingType = 2
						if (this.page == 1) {
							this.loadingText = '暂无数据'
						}
						this.page--
					}
				} else {
					this.loadingType = 3
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			})
		},
		addShop() {
			uni.navigateTo({
				url: '/pages/shop/edit'
			})
		},
		editShop(id) {
			uni.navigateTo({
				url: '/pages/shop/edit?id=' + id
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	padding-bottom: 120rpx;
	
	.shop-list {
		.empty {
			padding: 100rpx 0;
			text-align: center;
			
			.tip {
				font-size: 28rpx;
				color: #999;
			}
		}
		
		.shop-item {
			margin-bottom: 20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.shop-info {
				flex: 1;
				display: flex;
				align-items: center;
				
				.cover {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}
				
				.content {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					
					.name {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}
					
					.address {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #666;
					}
					
					.time {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			
			.shop-status {
				padding: 4rpx 16rpx;
				background: #f5f5f5;
				border-radius: 20rpx;
				
				text {
					font-size: 24rpx;
					color: #999;
				}
				
				&.active {
					background: #e8f7e8;
					
					text {
						color: #07c160;
					}
				}
			}
		}
	}
	
	.add-btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #07c160;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.iconfont {
			font-size: 32rpx;
			margin-right: 10rpx;
		}
		
		.text {
			font-size: 32rpx;
		}
	}
}
</style> 